<!--
 * @Author: sjt
 * @Date: 2024-05-25 18:52:35
 * @LastEditors: sjt
 * @LastEditTime: 2024-06-20 13:40:55
 * @Description: file content
-->
<template>
  <div class="wrap-video" :id="videoId" ref="videoRef"></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, defineProps, nextTick } from 'vue'
import EZUIKit from 'ezuikit-js'
import axios from 'axios'
let ezvizPlayer = ref(null)
let props = defineProps(['videoId', 'url'])
let videoRef = ref()
const initPlayer = () => {
  axios({
    url: 'https://open.ys7.com/api/lapp/token/get',
    method: 'post',
    params: {
      appKey: '0c13abc7e73b4ecfb104a75143015ef7',
      appSecret: 'e4546bdcdc7104dc4d26fdb15494b8ba'
    }
  }).then(({ data }) => {
    let divW = videoRef.value.clientWidth
    let divH = videoRef.value.clientHeight
    ezvizPlayer.value = new EZUIKit.EZUIKitPlayer({
      autoplay: true, // 默认播放
      //视频播放包裹元素
      id: props.videoId,
      //萤石token
      accessToken: data.accessToken,
      // ezopen://open.ys7.com/${设备序列号}/{通道号}.live
      url: props.url, // 播放地址
      template: 'simple', // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
      // header: ['capturePicture', 'zoom'], // 如果templete参数不为simple,该字段将被覆盖
      // plugin: ['talk'], // 加载插件，talk-对讲
      // 视频下方底部控件
      footer: ['broadcast', 'hd', 'fullScreen'], // 如果template参数不为simple,该字段将被覆盖
      footer: ['hd', 'fullScreen'], // 如果template参数不为simple,该字段将被覆盖
      audio: 0, // 是否默认开启声音 0 - 关闭 1 - 开启
      width: divW,
      height: divH
    })
  })
}
onMounted(() => {
  nextTick(() => {
    initPlayer()
  })
})

onUnmounted(() => {
  ezvizPlayer.value.stop()
})
</script>

<style lang="scss" scoped>
.wrap-video {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
